<template>
  <div class="container_box">
    <el-descriptions title="封装IndexedDB工具类">
      <el-descriptions-item label="描述">
        自己封装的IndexedDB工具，已封装功能有：添加数据、获取数据、获取所有数据、更新（单条、多条）数据、删除数据、删除所有数据。
      </el-descriptions-item>
    </el-descriptions>
    <div class="btn_box">
      <div>
        <el-button type="primary" @click="useIndexedDB('add')">
          添加数据
        </el-button>
        <span>
          添加一条数据到IndexedDB中(示例：{ id: 1, name: '张三', age: 24, email:
          'zhangsan@example.com' })
        </span>
      </div>
      <div>
        <el-button type="primary" @click="useIndexedDB('getData')">
          获取数据
        </el-button>
        <span>获取id为1的数据</span>
      </div>
      <div>
        <el-button type="primary" @click="useIndexedDB('getAll')">
          获取所有数据
        </el-button>
      </div>
      <div>
        <el-button type="primary" @click="useIndexedDB('update')">
          更新单条数据
        </el-button>
        <span>更新id为1的数据</span>
      </div>
      <div>
        <el-button type="primary" @click="useIndexedDB('updateMore')">
          更新多条数据
        </el-button>
        <span>
          更新多条数据[ { id: 1, name: "Jane Doe", age: 25 }, { id: 2, name:
          "Jim Doe", age: 35 } ]
        </span>
      </div>
      <div>
        <el-button type="primary" @click="useIndexedDB('delete')">
          删除单条数据
        </el-button>
        <span>删除id为1的数据</span>
      </div>
      <div>
        <el-button type="primary" @click="useIndexedDB('deleteAll')">
          删除所有数据
        </el-button>
      </div>
      <div>
        <el-button type="primary" @click="useIndexedDB('search')">
          搜索数据
        </el-button>
        <span>搜索数据为{ name: '张三1' }的数据</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import createIndexedDBUtil from "@/utils/indexeddb";

const index = ref(1);

const dbUtil = createIndexedDBUtil("MyDatabase", "MyStore");

const test = async () => {
  // 检查浏览器是否支持 IndexedDB
  if (!dbUtil.isIndexedDBSupported()) {
    console.error("浏览器不支持 IndexedDB");
    return;
  }

  // 打开数据库
  await dbUtil.openDB();
};

let userInfo, record, allRecords, queryResults;

const useIndexedDB = async (type) => {
  switch (type) {
    // 添加数据
    case "add":
      userInfo = await dbUtil.add({
        id: index.value,
        name: `张三${index.value}`,
        age: 1 * index.value,
        email: `zhangsan${index.value}@example.com`,
      });
      index.value++;
      console.log("添加数据:", userInfo);
      break;
    // 获取数据
    case "getData":
      record = await dbUtil.get(1);
      console.log("获取数据:", record);
      break;
    // 获取所有数据
    case "getAll":
      allRecords = await dbUtil.getAll();
      console.log("获取所有数据:", allRecords);
      break;
    // 更新数据
    case "update":
      record.age = 25;
      await dbUtil.update(record);
      console.log("更新数据:", await dbUtil.get(1));
      break;
    // 更新多条数据
    case "updateMore":
      await dbUtil.update([
        { id: 1, name: "Jane Doe", age: 25 },
        { id: 2, name: "Jim Doe", age: 35 },
      ]);
      console.log("Updated records:", await dbUtil.getAll());
      break;
    // 删除数据
    case "delete":
      await dbUtil.remove(1);
      console.log("删除数据:", await dbUtil.getAll());
      break;
    // 删除所有数据
    case "deleteAll":
      await dbUtil.removeAll();
      console.log("删除数据:", await dbUtil.getAll());
      break;
    // 搜索数据
    case "search":
      queryResults = await dbUtil.queryByKey("name", "张三1");
      console.log("搜索数据:", queryResults);
      break;
  }
  return;
};

test();
</script>

<style lang="less" scoped>
.btn_box {
  margin-top: 20px;
  div {
    margin-top: 20px;
  }
  button {
    width: 120px;
    margin-right: 16px;
  }
}
</style>
